<template>
    <div>
        <div>
            <el-table
                    :data="commentList"
                    border
                    @row-click="columnListener"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        align="center"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column prop="cid" label="_id" width="100"

                                 align="center">
                </el-table-column>

                <el-table-column prop="aid" :formatter="aidFormatter" label="位置" width="150"
                                 align="center">
                    <!--                    <span slot-scope="scope">-->
                    <!--                        {{aidData(scope.row.aid)}}-->
                    <!--                    </span>-->
                    <template slot-scope="scope">

                        <el-button type="text" @click="go_comment(scope.row)">跳转</el-button>

                    </template>

                </el-table-column>
                <el-table-column prop="content" label="内容" width="300"
                                 align="center">
                </el-table-column>
                <el-table-column prop="name" label="昵称" width="150"
                                 align="center">
                </el-table-column>
                <el-table-column prop="email" :formatter="emailFormatter" label="邮箱" width="200"
                                 align="center">
                </el-table-column>
                <el-table-column prop="addTheTime" label="发布时间" width="200"
                                 align="center">
                </el-table-column>
                <el-table-column prop="status" :formatter="statusFormatter" label="状态" width="150"
                                 align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="160"
                                 align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="btn_change(2)">
                            {{scope.row.status === 1?'关进小黑屋':'请出小黑屋'}}
                        </el-button>
                        <el-button type="text" size="small" @click="btn_change(3)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div style="margin-top: 1%;display: flex">
            <div style="flex: 1">
                <h3>试着批量操作?</h3>
                <el-button type="text" size="small" @click=btn_batch(0)>关到小黑屋</el-button>
                <el-button type="text" size="small" @click=btn_batch(2)>请出小黑屋</el-button>
                <el-button type="text" size="small" style="margin-left: 3%" @click=btn_batch(1)>删除</el-button>
                <p style="font-size: 10px">ps: 这里的批量处理会忽视当前状态,即 选择一个当前已经在小黑屋和一个没在小黑屋的,批量关到小黑屋时候,都是关到小黑屋</p>
            </div>
            <div style="flex: 1;margin-top: 1%">
            </div>
        </div>
    </div>
</template>

<script>
    let i = 0, j = 0, k = 0;
    let that;
    export default {
        name: "List",
        data() {
            return {
                commentList: [],
                pages: 0,
                total: 0,
                current: 0,
                size: 0,
                selectedComments: [],//选中的评论
                flag: 0,//这个用于判断来干嘛


                flag1: -1//用于删除文章提示


            }
        },

        mounted() {
            that = this;


            that.$Axios(that.$store).get(that.COMMENT_API + "/list/" + 0)
                .then(function (result) {
                    let data = result.data.data;
                    that.commentList = data.records;
                    that.pages = data.pages;
                    that.total = data.total;
                    that.current = data.current;
                    that.size = data.size;
                });
        },


        methods: {
            /**
             * !!!!
             * 这里默认端口号为80
             * 本地为8080
             * @param row
             */
            go_comment(row) {
                let location = window.document.location;
                console.log(location);
                let aid = row.aid;
                console.log(aid);
                let hostname = location.hostname;
                if (aid === 0) {
                    if (hostname === 'localhost' || hostname === "127.0.0.1") {
                        window.open('http://localhost:8080/classification');
                    } else {
                        window.open(location.origin + '/classification');
                    }
                } else {
                    if (hostname === 'localhost' || hostname === '127.0.0.1') {
                        window.open('http://localhost:8080/theArticleDetails?aid=' + aid);
                    } else {
                        window.open(location.origin + '/theArticleDetails?aid=' + aid);
                    }
                }
            },
            emailFormatter(row) {
                if (row.email === '' || row.email === null) {
                    return "...";
                }
                return row.email;
            },
            aidFormatter(row) {
                console.log("aidFormatter.row.aid==" + row.aid + "=i=" + i++);
                console.log("aidFormatter==" + row.status);
                if (row.aid === 0) {
                    return '分类';
                } else {
                    return '文章-' + row.aid;
                }

            },
            statusFormatter(row) {
                if (row.status === 1) {
                    return '正常';
                } else {
                    return '关在小黑屋中';
                }
            },

            //批量处理
            btn_batch(e) {
                let json = [];
                that.selectedComments.forEach(o => {
                    json.push(o.cid)
                });
                if (e === 0) {
                    //    批量关到小黑屋
                    that.$Axios(that.$store).post(that.COMMENT_API + "/small_black_house", json)
                        .then(() => that.$router.go(0));
                } else if (e === 1) {
                    //    批量删除
                    if (that.flag1 === -1) {
                        that.$notify({
                            title: '警告',
                            message: '当前操作不可逆,确认后请再次点击删除',
                            type: 'warning'
                        });
                        that.flag1 = -2;
                    } else if (that.flag1 === -2) {
                        that.$Axios(that.$store).post(that.COMMENT_API + "/delete", json)
                            .then(() => that.$router.go(0));
                        that.flag1 = -1;
                    }
                } else if (e === 2) {
                    //    批量清楚小黑屋
                    that.$Axios(that.$store).post(that.COMMENT_API + "/please_out", json)
                        .then(() => that.$router.go(0));
                }

            },
            //格式化数据
            formatter(row, column) {
                if (row.status === 1) {
                    return '发布';
                } else if (row.status === 0) {
                    return '废纸篓';
                }
            },
            //这里面对列进行了所有的操作
            columnListener(row, event, column) {
                if (that.flag === 0) {
                    console.log("正常")
                } else if (that.flag === 2) {
                    that.$Axios(that.$store).post(that.COMMENT_API + "/change_state/", [row.cid])
                        .then(() => {
                            that.$router.go(0);
                        });
                } else if (that.flag === 3) {
                    if (that.flag1 !== row.cid) {
                        that.$notify({
                            title: '警告',
                            message: '当前操作不可逆,建议关到小黑屋就行,确认后请再次点击删除',
                            type: 'warning'
                        });
                        that.flag1 = row.cid;
                    } else {
                        that.flag = -1;
                        let json = [
                            row.cid
                        ];
                        that.$Axios(that.$store).post(that.COMMENT_API + "/delete", json)
                            .then(function (result) {
                                that.$router.go(0);
                            });
                    }

                }
            },
            btn_change(e) {
                that.flag = e;
            },
            handleSelectionChange(val) {
                that.selectedComments = val;
            },
            //上一页
            previous(e) {
            },
            //下一页
            nextPage(e) {
            }
        },
    }
</script>

<style scoped src="../../../static/md/markdown.css">

</style>